/* eslint-disable vue/no-unused-components */ /* eslint-disable
vue/no-unused-components */
<template>
  <div class="container g-d--flex flex-column">
    <div class="m-header-down">
      <p>姿客给你别样的姿彩</p>
      <van-button type="default" @click="showDialog" size="small"
        >立即体验</van-button
      >
    </div>
    <div class="m-set-header">
      <div class="m-set__info">
        <!-- 店铺封面 -->
        <div class="m-header-avatar">
          <img :src="shopDetail.cover" alt="店铺封面" />
        </div>
        <div class="g-mt--10">{{ shopDetail.name }}</div>
        <!-- 等级 start -->
        <div class="g-mt--5 g-c--gray g-fs--14">
          等级：
          <div class="m-grade">
            <div
              class="g-d--i-b g-mr--5"
              v-for="(item, index) of crown"
              :key="index"
            >
              <i class="iconfont icon-huangguan"></i>
            </div>
            <div
              class="g-d--i-b g-mr--5"
              v-for="(item, index) of star"
              :key="index"
            >
              <i class="iconfont icon-star-fill"></i>
            </div>
          </div>
        </div>
        <!-- 等级 end -->
        <!-- 优惠提示 -->
        <div
          v-if="couponList.length !== 0 ? true : false"
          class="g-d--flex align-items-center g-mt--5"
        >
          <van-tag type="primary">优惠</van-tag>
          <p class="g-c--gray g-fs--12 g-ml--5">
            当前有{{ couponList.length }}个优惠，赶快兑换吧~
          </p>
        </div>
        <div
          v-if="goodsList.length !== 0 ? true : false"
          class="g-d--flex align-items-center g-mt--5"
        >
          <van-tag type="primary">奖品</van-tag>
          <p class="g-c--gray g-fs--12 g-ml--5">
            当前有{{ goodsList.length }}个奖品，赶快兑换吧~
          </p>
        </div>
      </div>
    </div>
    <van-tabs class=" flex-grow-1" color="#149EFF" v-model="active">
      <van-tab title="优惠">
        <div class="m-content">
          <!-- 优惠券 start -->
          <div
            class="m-ticket"
            v-for="(item, index) of viewCouponList"
            :key="index"
          >
            <div class="m-ticket__top">
              <div class="m-ticket__left">
                ￥
                <p class="m-ticket__left__text g-d--i-b">{{ item.amount }}</p>
              </div>
              <div class="m-ticket__info">
                <div>满{{ item.limit }}元使用</div>
                <div class="g-fs--18 g-fw--600">优惠券</div>
                <div>单次消费限用一张</div>
              </div>
              <div class="m-ticket__top__right">
                <van-button @click="showDialog" type="default"
                  >{{ item.points
                  }}<span class="g-fs--12 g-ml--2">积分兑换</span></van-button
                >
                <div class="g-fs--14 g-mt--5">剩：{{ item.count }}张</div>
              </div>
            </div>
            <div class="m-ticket__bottom">
              <div class="m-ticket__content">
                <div class="g-fs--12 g-c--white">
                  1.本优惠券有效期至{{ item.expired_time_text }}，过期作废；
                </div>
                <div class="g-fs--12 g-c--white">
                  2.本优惠券不与其他线上线下活动共同使用；
                </div>
                <div class="g-fs--12 g-c--white">
                  3.请务必在消费前询问店家确认，谢谢配合；
                </div>
              </div>
            </div>
          </div>
          <!-- 优惠券 end -->
        </div>
      </van-tab>
      <van-tab title="奖品">
        <div class="m-content">
          <!-- 奖品 start -->
          <div
            class="m-ticket m-ticket--goods"
            v-for="item of viewGoodsList"
            :key="item.goods_id"
          >
            <div class="m-ticket__top">
              <div class="m-ticket__left">
                <p class="m-ticket__left__text">兑</p>
              </div>
              <div class="m-ticket__info">
                <div>奖品兑换</div>
                <div class="g-fs--18 g-fw--600">礼品券</div>
                <div>一次性兑换</div>
              </div>
              <div class="m-ticket__top__right">
                <van-button @click="showDialog" type="default"
                  >{{ item.points
                  }}<span class="g-fs--12 g-ml--2">积分兑换</span></van-button
                >
                <div class="g-fs--14 g-mt--5">剩：{{ item.count }}张</div>
              </div>
            </div>
            <div class="m-ticket__bottom">
              <div class="m-ticket__content">
                <div class="m-ticket__content__media">
                  <img :src="item.cover" />
                </div>
                <div class="m-ticket__content__right">
                  <div>{{ item.name }}</div>
                  <div>
                    <van-tag
                      class="g-mr--5"
                      v-for="(tag, index) of item.tagsArr"
                      :key="index"
                      type="primary"
                      >{{ tag }}</van-tag
                    >
                  </div>
                  <div>发货：{{ item.send_address }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 奖品 end -->
        </div>
      </van-tab>
      <van-tab title="商家" class="p-shop-tab">
        <van-cell-group class="g-mb--10">
          <van-panel title="商家信息">
            <div class="p-shop-info">{{ shopDetail.description }}</div>
          </van-panel>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="商家店名" :value="shopDetail.name" />
          <van-cell class="p-cell-value--lg" title="商家品类">
            <van-tag
              class="g-mr--5"
              v-for="(tag, index) of viewShopDetail.categoryArr"
              :key="index"
              type="primary"
              >{{ tag }}</van-tag
            >
          </van-cell>
          <van-cell title="商家地址" :value="shopDetail.address"></van-cell>
          <van-cell
            title="商家电话"
            :value="shopDetail.phone_number"
          ></van-cell>
          <van-cell
            title="营业时间"
            :value="shopDetail.business_hours"
          ></van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ShopModel from "@/api/shop_model";
import Config from "@/config/index";
import Util from "@/lib/util.js";
import { Tag, Tab, Tabs, Button, Cell, CellGroup, Panel, Dialog } from "vant";
const shopModel = new ShopModel();
const util = new Util();
const ossUrl = Config.ossUrl;
export default {
  data() {
    return {
      active: 0,
      shop_id: this.$route.params.shop_id || 0,
      shopDetail: {},
      couponList: [],
      goodsList: [],
      crown: [],
      star: []
    };
  },
  name: "home",
  components: {
    "van-tag": Tag,
    "van-tabs": Tabs,
    "van-tab": Tab,
    "van-button": Button,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-panel": Panel
    // "van-dialog": Dialog
  },
  created() {
    this.getIndexInfo();
  },
  computed: {
    viewCouponList() {
      let couponList = this.couponList;
      let viewCouponList = couponList.map(item => {
        item.expired_time_text = util.formatTime(item.expired_time);
        return item;
      });
      return viewCouponList;
    },
    viewGoodsList() {
      let goodsList = this.goodsList;
      let viewGoodsList = goodsList.map(item => {
        item.cover = `${ossUrl}${item.cover}`;
        let tagsArr = util.strToArr(item.tags, ",");
        item.tagsArr = tagsArr;

        return item;
      });
      return viewGoodsList;
    },
    viewShopDetail() {
      let shopDetail = this.shopDetail;
      shopDetail.categoryArr = util.strToArr(shopDetail.category, ",");
      let viewShopDetail = shopDetail;
      return viewShopDetail;
    }
  },
  methods: {
    getIndexInfo() {
      const getShopDetail = shopModel.getShopDetail({ shop_id: this.shop_id });
      const getCouponList = shopModel.getCouponList({ shop_id: this.shop_id });
      const getGoodsList = shopModel.getGoodsList({ shop_id: this.shop_id });
      Promise.all([getShopDetail, getCouponList, getGoodsList]).then(res => {
        const shopDetail = res[0];
        const couponList = res[1].couponList;
        const goodsList = res[2].goodsList;

        console.log({ shopDetail, couponList, goodsList });
        this.shopDetail = shopDetail;
        this.couponList = couponList;
        this.goodsList = goodsList;
        this.shopDetail.cover = `${ossUrl}${this.shopDetail.cover}`;
        let rankObj = util.rank(shopDetail.rank_point);
        this.crown = util.createArr(rankObj.crown);
        this.star = util.createArr(rankObj.star);
      });
    },
    showDialog() {
      Dialog.confirm({
        title: "提示",
        message: "下载姿客APP"
      }).then(() => {
        window.open("http://a.app.qq.com/o/simple.jsp?pkgname=cn.aaaapp.zike");
      });
    }
  }
};
</script>
<style lang="scss">
/* pages/set/set.wxss */
@import "../assets/css/m-ticket";
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
html {
  background-color: #fff;
}
#app,
.container {
  height: 100%;
}
div {
  font-size: 14px;
}
.m-set-header {
  background-color: #fff;
  position: relative;
  padding-bottom: 20px;
  padding-top: 75px;
}

.m-header__bg {
  height: 156px;
  width: 100%;
  background-color: #149eff;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

.m-set__info {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.m-set_edit {
  position: absolute;
  right: 40px;
  top: 85px;
  z-index: 20;
  font-size: 14px;
}

.m-set_edit .iconfont {
  font-size: 36px;
}

.m-header-avatar {
  width: 75px;
  height: 75px;
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.3);
  background-color: #149eff;
  overflow: hidden;
}

.m-header-avatar img {
  width: 100%;
  height: 100%;
}

.m-grade {
  display: inline-block;
}

.m-grade .iconfont {
  color: #ffb103;
}
#app .van-tabs__content,
#app .van-tab__pane {
  height: 100% !important;
}
#app .van-tab__pane {
  overflow: hidden;
  overflow-y: auto;
}
.p-shop-tab {
  background-color: #fafafa;
}
.p-shop-info {
  padding: 10px 10px 10px 15px;
}
.p-cell-value--lg {
  .van-cell__value {
    flex: 2;
  }
}
.m-header-down {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #149eff;
  display: flex;
  padding: 10px 1rem;
  color: #fff;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  z-index: 100;
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2);
}
.m-header-down .van-button__text {
  color: #43b2ff;
}
.m-ticket .van-button__text {
  color: #fd992a;
}
.m-ticket--goods .van-button__text {
  color: #43b2ff;
}
</style>
